
<mat-card class="chatbot mat-elevation-z5">

  <div class="text-end">
    <button
      mat-button
      (click)="close()">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <div class="messages" id="chatMessages">
    <div
      *ngFor="let msg of messages"
      [class]="msg.type + ' message ' + msg.finish"
      [innerHTML]="msg.content === '' ? getDots() : (msg.content | marked)">
    </div>
  </div>

  <form (submit)="submit()" class="mt-2">

    <mat-form-field class="w-100 standalone-field">
      <input
        matInput
        placeholder="Where the Machine Creates the Code ..."
        [(ngModel)]="query"
        name="query"
        #queryField
        [disabled]="session === ''"
        (keyup.esc)="close()"
        autocomplete="off">
      <button
        mat-icon-button
        type="submit"
        [disabled]="session === ''"
        matSuffix>
        <mat-icon>send</mat-icon>
      </button>
    </mat-form-field>

  </form>

</mat-card>
